<template>
  <view class="list">
    <view class="list-item" v-for="(item, index) in value" :key="item.value">
      <UniImageUpload v-model="item.src" />
      <el-input class="ml-1" style="width: 100px;" v-model="item.title"></el-input>
      <el-button
        class="ml-1"
        type="primary"
        :plain="true"
        size="small"
        icon="el-icon-remove-outline"
        @click="deleteItem(index)"
      />
    </view>
    <el-button
      class="ml-1 plus-btn"
      type="primary"
      icon="el-icon-circle-plus-outline"
      @click="addItem()"
    />
  </view>
</template>

<script>
  import { UniImageUpload } from 'modules/component/upload'
  export default {
    name: 'selectWordType',
    components: { UniImageUpload },
    props: {
      value: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
      }
    },
    methods: {
      addItem(val) {
        this.value.push({ src: '', title: '' })
      },
      deleteItem(index) {
        this.value.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    .list-item {
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .img {
        width: 80px;
      }
      &.list-item_select {
        border: 1px solid red;
      }
      .ml-1 {
        margin-left: 10px;
      }
    }
    .plus-btn {
      width: 100px;
      margin-top: 10px;
    }
  }
</style>